import { Collapse, Drawer } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import { searPaperContent } from '@/api/exam/paper';
import { Questions } from '@/api/question';
import { tagsMap } from '@/contants/common';
import MarkDownComponent from '@/components/markdown';
import { sortformTypes } from '@/utils/filter';

interface Props {
  questions: Questions[];
  visible: boolean;
  setVisible: (parmas: boolean) => void;
}

const { Panel } = Collapse;

const optionsIndex = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];

export default function DetailDrawer({ questions, visible, setVisible }: Props) {
  const sortedQuestions = useMemo(() => sortformTypes(questions ?? []), [questions]);
  return (
    <>
      <Drawer
        title="题目详情"
        style={{ width: '600px', zIndex: 9999 }}
        open={visible}
        onClose={() => setVisible(false)}
      >
        {sortedQuestions?.map((it, index) => (
          <div key={index} style={{ marginBottom: '20px' }}>
            <p>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <span style={{ fontSize: '18px', marginRight: "8px" }}>{`(${it.type} )` + (index + 1) + '. ' + it.question}</span>{' '}
                {tagsMap[it.difficulty]}
              </div>
              {it.description && <MarkDownComponent text={it.description} />}
            </p>
            <p>
              {(it?.options ? JSON.parse(it.options) : []).map((it: string, idx: number) => (
                <p>
                  {optionsIndex[idx]}. {it}
                </p>
              ))}
            </p>
            <Collapse bordered={false} style={{ marginTop: '10px' }}>
              {it.answer && (
                <Panel header="答案" key="1">
                  <MarkDownComponent text={it.answer} />
                </Panel>
              )}
              {it.analysis && (
                <Panel header="解析" key="2" style={{ marginTop: '10px' }}>
                  <MarkDownComponent text={it.analysis} />
                </Panel>
              )}
            </Collapse>
          </div>
        ))}
      </Drawer>
    </>
  );
}
